import * as React from 'react';
import type { Metadata, Viewport } from 'next';
import { notFound } from 'next/navigation';

// Next Intl
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';

import Favicon from '@Root/public/assets/favicon/favicon.ico';
import { LOCALES } from '@/lib/variables';
import { JSONLD, ROOTKEYWORDS } from '@/lib/seo';
import { routing } from '@/i18n/routing';
import { Providers } from '@/context/Providers';

import { Toaster } from '@/components/ui/toaster';
import { BaseNavbar } from '@/app/components/layout/BaseNavbar';
import { BaseFooter } from '@/app/components/layout/BaseFooter';

export const metadata: Metadata = {
    title: 'Invoify | 免费发票生成器',
    description: '使用Invoify免费发票生成器轻松创建发票。立即尝试！',
    icons: [{ rel: 'icon', url: Favicon.src }],
    keywords: ROOTKEYWORDS,
    // viewport: 'width=device-width, initial-scale=1',
    robots: {
        index: true,
        follow: true,
    },
    alternates: {
        // canonical: BASE_URL,
    },
    authors: {
        name: 'Ali Abbasov',
        url: 'https://aliabb.vercel.app',
    },
    verification: {
        // google: GOOGLE_SC_VERIFICATION,
    },
};

/**
 * https://nextjs.org/docs/app/api-reference/functions/generate-viewport
 * 这块需要单独声明
 */
export const viewport: Viewport = {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 1,
    userScalable: false,
    viewportFit: 'cover',
};

export const generateStaticParams = () => {
    // 这里需要增加params参数
    return LOCALES.map((locale) => ({ params: { locale: locale.code } }));
};

export default async function LocaleLayout({ children, params }: { children: React.ReactNode; params: Promise<{ locale: string }> }) {
    // 这里需要await
    const { locale } = await params;

    // Ensure that the incoming `locale` is valid
    if (!routing.locales.includes(locale as any)) {
        notFound();
    }

    // Providing all messages to the client
    // side is the easiest way to get started
    const messages = await getMessages({ locale });

    // TODO: 谷歌字体需要下载
    // const bodyClassName = `${outfit.className} ${dancingScript.variable} ${parisienne.variable} ${greatVibes.variable} ${alexBrush.variable}`;
    const bodyClassName = ``;

    return (
        <html lang={locale} suppressHydrationWarning>
            <head>
                <script type="application/ld+json" id="json-ld" dangerouslySetInnerHTML={{ __html: JSON.stringify(JSONLD) }} />
            </head>
            <body className={`${bodyClassName} antialiased bg-slate-100 dark:bg-slate-800 `}>
                <NextIntlClientProvider locale={locale} messages={messages}>
                    <Providers>
                        <div className="lg:container m-auto">
                            <BaseNavbar />
                            <div className="flex flex-col">{children}</div>
                            <BaseFooter />
                            {/* Toast component */}
                            <Toaster />
                        </div>
                    </Providers>
                </NextIntlClientProvider>
            </body>
        </html>
    );
}
